<template>
  <div class="left-box public-box">
    <p class="public-tit">2021年度营收前十企业</p>
    <ul class="ten" v-if="items.length==0">
      <li class="font-30">暂无数据</li>
    </ul>
    <ul class="ten" v-else>
      <li v-for="(item,index) in items" :key="index">
        <i class="no-img">{{ index + 1 }}</i>
        <div class="rt">
          <p class="font-30">{{ item.corpName }}</p>
          <p class="flex-align-center">
            <img class="site-icon" src="../../../assets/images/index/map_icon.png">
            <i class="font-24">{{ item.areaName }}</i>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { stt } from '@/models/screen'

export default {
  name: 'LeftMid',
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.init('')
  },
  methods: {
    async init(areaCode) {
      const thisYear = new Date().getFullYear()
      const date = {
        year: thisYear - 1,
        areaCode:areaCode
      }
      const { data } = await stt.getScreenStatisticsEnterpriseRevenue(date)
      this.items = data
    }
  }

}
</script>

<style scoped lang="less">
.left-box {
  margin: 49px 0 38px;
}

.ten {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 35px;

  li {
    width: 50%;
    display: flex;
    margin-bottom: 25px;

    .no-img {
      width: 65px;
      height: 65px;
      margin-right: 12px;
      flex: 0 0 auto;
      color: #fff !important;
      .font-28();
      .flex-all-center();
    }

    &:nth-child(1) {
      color: #F8524D;

      .no-img {
        background: url("../../../assets/images/index/NO1.png") no-repeat;
      }
    }

    &:nth-child(2) {
      color: #FE9E6D;

      .no-img {
        background: url("../../../assets/images/index/NO2.png") no-repeat;
      }
    }

    &:nth-child(3) {
      color: #73B7FF;

      .no-img {
        background: url("../../../assets/images/index/NO3.png") no-repeat;
      }
    }

    .rt {
      flex: 1;
      width: 0;
    }

    .site-icon {
      width: 16px;
      height: 22px;
      margin-right: 5px;
    }

    .font-30 {
      font-weight: bold;
      padding: 10px 0;
      .text-overflow();
    }

    .font-24 {
      color: rgba(255, 255, 255, .6);
    }
  }
}
</style>
